<template>
  <page-frame bg="#323232">
    <div class="Pc">
      <div class="box">


        <div class="top">
          <div class="left">
            <img class="avatar" src="@/assets/images/banner.png"/>
            <div class="userinfo">
              <div class="name">
                <span>欢迎您</span>
                {{ userInfo.username }}
              </div>
              <div class="box_num">
                <span>余额&nbsp;&nbsp;&nbsp;</span>
                ¥<span class="num">123.76</span>
                <img src="@/assets/images/shuaxin.png" @click="updateUderInfo"/>
              </div>
            </div>
          </div>

          <div class="right">
            <div class="button_list">
              <div class="item" @click="go('Recharge')">充值</div>
              <div class="item" @click="go('Extract')">提现</div>
            </div>
            <div class="my">
              <div class="item" @click="bets(0)">
                <img src="@/assets/icons/svg/bet.svg"/>
                <div>未结算</div>
              </div>

              <div class="item" @click="bets(1)">
                <img src="@/assets/icons/svg/bet2.svg"/>
                <div>已结算</div>
              </div>
              <div class="item" @click="go('UserInfo')">
                <img src="@/assets/icons/svg/my.svg"/>
                <div>我的账户</div>
              </div>

            </div>
          </div>


        </div>

        <div class="main">
          <div class="box_addr">
            <div id="qrCodeUrl"></div>

            <div class="box_info">
              <div class="info">
                充值地址：{{ userInfo.address }}
              </div>
              <el-button id="copy_text" :data-clipboard-text="userInfo.address" @click="copy" type="primary" round>
                复制地址
              </el-button>
            </div>

          </div>
          <div class="hr"></div>

          <el-table
              :data="list"
              style="width: 100%"
          >
            <el-table-column prop="date" label="时间"/>
            <el-table-column prop="name" label="金额"/>
          </el-table>
        </div>
      </div>
    </div>
    <div class="Mobile">
      <div class="box">
        <div class="top">
          <div class="left">
            <img class="avatar" src="@/assets/images/banner.png"/>
            <div class="userinfo">
              <div class="name">
                {{ userInfo.username }}
              </div>
              <div class="box_num">
                余额 ¥<span class="num">123.76</span>
                <img src="@/assets/images/shuaxin.png" @click="updateUderInfo"/>
              </div>
              <div class="button_list">
                <div class="item" @click="go('Recharge')">充值</div>
                <div class="item" @click="go('Extract')">提现</div>
              </div>
            </div>
          </div>

          <div class="right">
            <div class="my">
              <div class="item" @click="bets(0)">
                <img src="@/assets/icons/svg/bet.svg"/>
                <div>未结算</div>
              </div>

              <div class="item" @click="bets(1)">
                <img src="@/assets/icons/svg/bet2.svg"/>
                <div>已结算</div>
              </div>
              <div class="item" @click="go('UserInfo')">
                <img src="@/assets/icons/svg/my.svg"/>
                <div>我的账户</div>
              </div>

            </div>
          </div>


        </div>

        <div class="main">
          <div class="box_addr">
            <div id="qrCodeUrl"></div>

            <div class="box_info">
              <div class="info">
                充值地址：{{ userInfo.address }}
              </div>
              <el-button id="copy_text" :data-clipboard-text="userInfo.address" @click="copy" type="primary" round>
                复制地址
              </el-button>
            </div>
          </div>
          <div class="hr"></div>
        </div>
      </div>
      <el-table
          :data="list"
          style="width: 100%"
      >
        <el-table-column prop="date" label="时间"/>
        <el-table-column prop="name" label="金额"/>
      </el-table>
    </div>


  </page-frame>
</template>

<script>
import {reactive, ref, toRefs, getCurrentInstance, onMounted} from "vue";
import QRCode from 'qrcodejs2-fix';
import Clipboard from 'clipboard'
import {ElMessage} from "element-plus";

export default {
  name: "Recharge",
  setup() {
    /* 全局挂载utils工具类 start */
    const {proxy} = getCurrentInstance();
    const {$api, $common, $validate, $router, $elUtils, $tokenUtils, $ext} =
        proxy;

    /* 全局挂载 end */
    const state = reactive({
      userInfo: $ext.getUser(),
      list: [],
      par: {
        page: 1,
        limit: 20,
        money_type: '1',
        type: 1
      }

    });

    //生成二维码
    const creatQrCode = async () => {
      document.getElementById("qrCodeUrl").innerHTML = ""; //1
      await new QRCode(document.getElementById("qrCodeUrl"), {
        text: state.userInfo.address, // 需要转换为二维码的内容
        width: 176,
        height: 176
      })
      if (!isModel()) {
        const qrCanvs = document.getElementsByTagName('canvas')[0];
        const qrcBase64 = qrCanvs.toDataURL('image/jpeg'); // 转成jpg
        const qrcImg = document.querySelector('#qrcode > img');
        qrcImg.crossOrigin = 'anonymous';
        qrcImg.src = qrcBase64;
      }
    }

    const isModel = () => {
      let u = navigator.userAgent, app = navigator.appVersion;
      let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
      let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      if (isAndroid) {
        return false;
      }
      if (isIOS) {
        return true;
      }
    }

    //复制
    const copy = () => {
      let clipboard = new Clipboard("#copy_text");
      console.log(clipboard)
      clipboard.on("success", (e) => {
        ElMessage.success("复制成功");
        clipboard.destroy(); // 释放内存
      });
      clipboard.on("error", (e) => {
        // 不支持复制
        ElMessage.warning("该浏览器不支持自动复制");
        clipboard.destroy(); // 释放内存
      });
    }


    const getList = () => {
      $api.moneyLog(state.par).then(res => {
        state.list = res.data.data;

        console.log(res.data.data)
      })
    }

    const go = (name) => {
      $router.push({name: name});
    }
    // 跳转注单
    const bets = (type) => {
      $router.push({
        path: "/bets",
        query: {
          type: type
        }
      });
    };

    const updateUderInfo = () => {
      $ext.getUser('', true)
    }

    onMounted(() => {
      creatQrCode()
      getList()
    });


    return {
      copy,
      ...toRefs(state),
      go,
      bets,
      updateUderInfo,
    };
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import 'usdt';

input {
  width: 100%;
  height: 40px;
  border-radius: 6px;
  padding-left: 10px;
  font-size: 16px;
  color: #333333;
  background: #eee;
  border: 0;
}

input:focus,
input:focus-visible {
  background-color: rgb(255, 255, 255) !important;
  border: 2px solid rgb(33, 138, 251) !important;
}

.input__inner {
  width: 100%;
  border: 0 !important;
  background: #eee !important;
}

.login-body {
  display: flex;
  /*x轴对齐*/
  justify-content: center;
  /*y轴对齐*/
  align-items: center;
  height: calc(100vh - 70px);
  width: 100%;
  background-color: #fff;
  //padding-top: 180px;
  .login-container {
    width: 500px;
    height: 380px;
    background-color: #fff;
    border-radius: 4px;

    .head {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 30px 0;

      .title {
        font-size: 24px;
        color: #333333;
        font-weight: bold;
      }
    }

    .login-form {
      width: 90%;
      margin: 0 auto;

      .account {
      }

      .password {
        margin: 20px 0;
      }

      .btn {
        .submit {
          background-color: rgba(255, 45, 137, 1);
          color: #ffffff;
          padding: 14px 20px;
          font-size: 16px;
        }
      }
    }
  }
}
</style>
